<template>
  <div class="container">
    <div class="ui-title">基础用法</div>
    <cell-group :radius="10" width="95%">
      <cell title="默认弹出" link @click="showPopup('center')"/>
    </cell-group>

    <div class="ui-title">弹出位置</div>
    <cell-group :radius="10" width="95%">
      <cell title="顶部弹出" link @click="showPopup('top')"/>
      <cell title="底部弹出" link @click="showPopup('bottom')"/>
      <cell title="左侧弹出" link @click="showPopup('left')"/>
      <cell title="右侧弹出" link @click="showPopup('right')"/>
    </cell-group>

    <popup v-model="show" :position="position" :styles="{width}"></popup>
  </div>
</template>

<script>
import CellGroup from "../../components/cell-group";
import Cell from "../../components/cell";
import Popup from "../../components/popup";
export default {
  components: {
    CellGroup,
    Cell,
    Popup,
  },
  data() {
    return {
      show: false,
      position: 'center',
      width: '100%',
    };
  },
  methods: {
    showPopup(position) {
      this.position = position;
      
      switch(position) {
        case 'center':
          this.width = '90%';
          break;
        case 'top':
          this.width = '100%';
          break;
        case 'bottom':
          this.width = '100%';
          break;
        case 'left':
          this.width = '70%';
          break;
        case 'right':
          this.width = '70%';
          break;
      }

      this.show = !this.show;
    },
  },
};
</script>


<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f7f8fa;
  overflow: hidden;
}
</style>